<template>
    <div class="aiAnalysis">
        <div class="icon"></div>
        <div class="back">
            <div class="titleBar">
              <div class="title">AI教学学情分析</div>
              <div class="title2">AI一下，让备课更简单</div>
            </div>
            <div class="hint">请在上方搜索框中输入包含成绩的 
              <div class="hint2">Excel表格</div>进行数据可视化分析，或者与
              <div class="hint2">AI助手小贝一起探讨更好的教学策略</div>
            </div>
            <div class="example">
                <input
                   v-model="input"
                   placeholder="课程主题，教学目标，课程时长，学科"
                   @input=""
                   class="example-input"
                />
            </div>
            <div class="hint3">或者在下方选择需要可导入的文件类型和学情分析维度</div>
            <div class="file-outer" @dragover="handleDragOver" @drop="handleDrop">
                <div class="file-analysis">分析文件</div>
                <div class="file-icon" @click="openFileInput"></div>
            </div>
            <div class="hint4">点击活拖拽上传</div>
            <input
              ref="fileInput"
              type="file"
              style="display: none;"
              @change="handleFileChange"
            />
            <div class="select-board">
                <div v-for="item in values" :key="item.id" style="margin-right: 60px;">
                    <div class="select-wrapper">
                      <select v-model="item.prop" class="selector" :placeholder="item.placeholder" @change="updateSearchInput">
                        <option disabled selected :label="item.placeholder" value=""/>
                        <option
                            v-for="selectBar in item.arr"
                            :key="selectBar.id"
                            :label="selectBar.label"
                            :value="selectBar.label"
                        />
                      </select>
                    </div>
                </div>
            </div>
        </div>
        <el-button color="rgba(191, 163, 255, 0.77)" round class="back-button" @click="backUp">返回</el-button>
    </div>
</template>

<script setup lang="ts">
import { arr1, arr2, arr3, arr4, arr5 } from '@/views/lesson-analysis/components/arr'
import { ref } from 'vue';
import { useSearchStore } from '@/stores/search';
import { useRouter } from 'vue-router';
const searchStore = useSearchStore()
const router = useRouter()
const input = ref('比如输入“帮助我对XX学生从学习投入度，学习能力评价，课堂互动，个体进步维度进行学情分析”')
type FormKeys = 'performance' | 'interact' | 'practice' | 'grade' | 'personal'; 
const values = ref([
    {
        id: 1,
        prop: searchStore.analysisForm.performance as FormKeys,
        placeholder: '学生表现',
        arr: arr1
    },
    {
        id: 2,
        prop: searchStore.analysisForm.interact as FormKeys,
        placeholder: '课堂互动',
        arr: arr2
    },
    {
        id: 3,
        prop: searchStore.analysisForm.practice as FormKeys,
        placeholder: '作业与练习',
        arr: arr3
    },
    {
        id: 4,
        prop: searchStore.analysisForm.grade as FormKeys,
        placeholder: '考试与成绩',
        arr: arr4
    },
    {
        id: 5,
        prop: searchStore.analysisForm.personal as FormKeys,
        placeholder: '个性化分析',
        arr: arr5
    }
])
const fileInput = ref<HTMLInputElement | null>(null);
const openFileInput = () => {
    fileInput.value?.click();
};
const handleDragOver = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
};
const handleDrop = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
        const file = files[0];
        searchStore.analysisForm.file = file;
        console.log('拖拽上传的文件:', file);
    }
};
const handleFileChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
        const file = target.files[0];
        searchStore.analysisForm.file = file;
        console.log('选择上传的文件:', file);
    }
};
const updateSearchInput = () => {
    let info = '';
    values.value.forEach(item => {
        if (item.id === 1) {
            searchStore.analysisForm.performance = item.prop;
        } else if (item.id === 2) {
            searchStore.analysisForm.interact = item.prop;
        } else if (item.id === 3) {
            searchStore.analysisForm.practice = item.prop;
        } else if (item.id === 4) {
            searchStore.analysisForm.grade = item.prop;
        }else if (item.id === 5) {
            searchStore.analysisForm.personal = item.prop;
        }if (item.prop) {
            info += `${item.placeholder}: ${item.prop}, `;
        }
    });
    info = info.replace(/,\s*$/, '');
    searchStore.searchInput = info;
};
function backUp(){
   router.push('/')
}
</script>

<style scoped lang="less">
@import url('@/views/lesson-analysis/index.less');
</style>